<div>
    <!-- ko compose: { view: 'popup.html', mode: 'templated' } -->
    <div data-part="content">
	    <div class="row cms-row-inner">
	       	<div class="col-md-48 form-group">
	       		<label for="type">Type</label>
		       	<select id="type" class="form-control" 
	        		data-bind="keyLabel { value: tier.type.key, required: true },
	        							  options: typeOptions,
				                          optionsText: 'label',
				                          optionsValue: 'key',
				                          optionsCaption: '---',
				                          event: { change: $root.typeChanged }"></select>
	       	</div>
	    </div>
	                       
        <div class="row cms-row-inner">
	       	<div class="col-md-36 form-group">
	            <label for="rue">Rue</label>
	            <input type="text" id="rue" class="form-control" 
	            	   data-bind="rue { value: tier.adresse.rue }, 
	            	   			  validationReport: formErrors, 
	            	   			  validationSelect: {required: [ville],
	            	   			  					 enable: true,
	            	   			  					 msgEmpty: i18n.t('cms:error.emptyList'),
				            	   			  		 msgNotEmpty: i18n.t('cms:error.selectList'),
				            	   			  		 options: msgOptions, 
				            	   			  		 label: msgOptionsTitle,
				            	   			  		 value: msgOptionValue}">
	        </div>
	       	<div class="col-md-12 form-group">
	            <label for="numero">Numero</label>
	            <input type="text" id="numero" class="form-control" 
	            	   data-bind="numero { value: tier.adresse.numero }, 
	            	   			  validationReport: formErrors, 
	            	   			  validationSelect: {required: [rue],
	            	   			  					 enable: true,
	            	   			  					 msgEmpty: i18n.t('cms:error.emptyList'),
				            	   			  		 msgNotEmpty: i18n.t('cms:error.selectList'),
				            	   			  		 options: msgOptions, 
				            	   			  		 label: msgOptionsTitle,
				            	   			  		 value: msgOptionValue}">
	        </div>
        </div>

    	<div class="row cms-row-inner">
	       	<div class="col-md-12 form-group">
	            <label for="codePostal">Code Postal *</label>
	            <input type="text" id="codePostal" class="form-control" 
	            	   data-bind="integer { value: tier.adresse.codePostal, required: true }, 
	            	   			  validationReport: formErrors">
	        </div>
	       	<div class="col-md-36 form-group">
	            <label for="ville">Ville *</label>
	            <input type="text" id="ville" class="form-control" 
	            	   data-bind="ville { value: tier.adresse.ville, required: true , msgRequired: i18n.t('cms:error.required')}, 
	            	   			  validationReport: formErrors, 
	            	   			  validationSelect: {required: [codePostal],
	            	   			  					 enable: true,
	            	   			  					 msgEmpty: i18n.t('cms:error.emptyList'),
				            	   			  		 msgNotEmpty: i18n.t('cms:error.selectList'),
				            	   			  		 options: msgOptions, 
				            	   			  		 label: msgOptionsTitle,
				            	   			  		 value: msgOptionValue}">
	        </div>
        </div>
        
        <div class="row cms-row-inner">
	       	<div class="col-md-12 form-group">
	            <label for="du">DU *</label>
	            <input type="text" id="du" class="form-control" 
	            	   data-bind="date { value: tier.du, required: true }, validationReport: formErrors">
	        </div>
	       	<div class="col-md-12 form-group">
	            <label for="au">AU</label>
	            <input type="text" id="au" class="form-control" 
	            	   data-bind="date { value: tier.au }, validationReport: formErrors">
	        </div>
        </div>
    </div>
    <!-- /ko -->
</div>
